<template>
	<div>
		<el-upload class="upload" :action="$http.upFileUrl" :show-file-list="false" list-type="picture-card" :data="uploadData"
			:on-success="uploadSuccessHandle" :before-upload="beforeUpload" :headers="headers" :multiple="false"
			style="width: 300px;">
			<img v-if="value" :src="value" style="
	      height: 100%;
	      width: 100%;
	      border: solid 1px #999999;
	      border-radius: 2px;
	    " />
			<i v-else class="el-icon-plus"></i>
		</el-upload>
	</div>
</template>
<script>
	export default {
		name: "YwUpload",
		created() {},
		props: {
			rootPath: {
				type: String,
				default: ""
			},
			value: {
				type: String,
				default () {
					return "";
				},
			},
		},
		data() {
			return {
				headers: {},
				uploadData: {
					rootPath: ""
				},
			};
		},
		mounted() {
			this.uploadData.rootPath = this.rootPath
			this.headers = this.$http.uploadHeaders()
			console.info(this.headers)
		},
		methods: {
			//上传添加图片
			uploadSuccessHandle(res, file) {
				if (res.success) {
					this.$common.msgSuccess('上传成功');
					this.$emit("input", res.result.url); // 将内容同步到父组件中
				} else{
					this.$common.msgError('上传失败');
					this.$emit("input", "dddddd"); // 将内容同步到父组件中
				}
			},
			//上传文件之前钩子事件
			beforeUpload(file) {
			    const isLt5M = file.size / 1024 / 1024 < 5;
			    if (!isLt5M) {
			        this.$common.msgWarn('图片大小不能超过 5MB!');
			    }
			    return isLt5M;
			}
		},
	};
</script>

<style lang="scss" scoped>

	
</style>
